5.4.5: Value Conversions

This section can be used to apply conversions to the data between the server and the web page (Requires Server Controllers). For example, dates may be stored in a different format to which they are entered and displayed to the user. This requires two way conversions of the values. The available options will depend on the type of control that is selected. The Display Mask option can be used to format strings, to add dashes, spaces, brackets, etc. The formatting is applied during display only and the underlying data is left intact for transmission between client and server. A useful list of predefined masks is provided. The # character will output a single character from the data. Any other characters contained in the mask will be output literally. Any extra text in the data that is not mapped to the mask will be output at the end. If the data is shorter than the mask then the mask will be applied until the data is complete and no further literal mask characters will be output, except any closing brackets such as ), ], or }. The Data Date Format option specifies the format of date fields, typically representing the the format of dates within server applications. Entered values are converted to this format prior to submission actions to the server (Requires server controllers). A list of commonly used formats is provided for convenience. You can enter your own format if required. The Display Date Format option sets the format to be used for dates displayed on screens. A list of commonly used formats is provided for convenience. You can enter your own format if required. Format strings operate in a similar manner to the Java SimpleDateFormat class, e.g. dd/MM/yyyy. The table below summarises the supported format string characters. In addition, the display date format may contain the special characters # or $ to split the format across multiple input controls. The $ symbol creates a separate text box for the preceding section, whereas the # creates a drop-down list. Please see examples below, illustrating the use these options. Table of Value Conversions available for Dates

Field	Full Form	Short Form
Year	yyyy (4 digits)	yy (2 digits), y (2 or 4 digits)
Month	MMM (name or abbr.)	MM (2 digits), M (1 or 2 digits)
	NNN (abbr.)
Day of Month	dd (2 digits)	d (1 or 2 digits)
Day of Week	EE (name)	E (abbr)
Hour (1-12)	hh (2 digits)	h (1 or 2 digits)
Hour (0-23)	HH (2 digits)	H (1 or 2 digits)
Hour (0-11)	KK (2 digits)	K (1 or 2 digits)
Hour (1-24)	kk (2 digits)	k (1 or 2 digits)
Minute	mm (2 digits)	m (1 or 2 digits)
Second	ss (2 digits)	s (1 or 2 digits)
AM/PM	a

Examples: Table of example date format strings

Date Format	Example
yyyy-M-d	2006-10-15
dd MMMM yy	15 October 06
MM/dd/yyyy HH:mm:ss	10/15/2006 17:23:45
MM/dd/yyyy hh:mma	10/15/2006 5:23PM

Split Date Controls As mentioned above, the $ and # characters can be used in the Display format string to split the resulting control into multiple parts. When used, these characters must be placed after a date format character from the table above. The $ symbol places all the preceding parts of the format string into one text box, and all the remaining parts into a second text box. You can use multiple $ characters if required to split the resulting display into three or more text box controls. When using a split date control in this way, WebMaker will try and split any Placeholder Text provided across the separate controls, by attempting to match the non-formatted characters in the format and placeholder strings. Example - Splitting the data and time components of a data time field. Using a display format string of 'dd/MM/yyyy$ HH:mm:ss' with placeholder text of 'date time' will result in the following output: Example - Splitting a data into three parts. Using a display format string of 'dd$/MM$/yyyy$', with placeholder text of 'dd/mm/yyyy', will result in the following output: / / The # symbol works in a similar way, but only impacts on the immediately preceding part of the date string. This section will be rendered using a drop down rather than a text box. You can use multiple # characters to render multiple parts of the date as drop downs. When used with a four digit year section (yyyy#) the resulting dropdown will show date values upto 100 years before and after the selected date. As soon as a different year is selected however, the options will be adjusted to reset this range on the newly selected year. Example - Splitting a date into three parts using drop downs. Using a display format string of 'dd#/MMMM#/yyyy#', with placeholder text of 'day/month/year', will result in the following output: day 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 / month January February March April May June July August September October November December / year 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 This option can be used for date or time fields. If the checkbox is ticked, a calendar icon will be provided to enable the selection of dates via a popup calendar. Depending on the specified Display format, the calendar popup will allow selection of date, date & time, or just time values. The Calendar Type list shows the different selection and display methods for the calendar. These options include the ability to navigate monthly or yearly, and allow for the entry of values representing the year. The year and month selection drop-downs option is useful for Date of Birth type controls. It provides a list of 100 years backwards. It is possible to specify data constraints for Date fields using Event processing to set date range constraints. E.g. Can't select a date forward from today. Please see sections on custom scripts for more information. The Button Styling option allows a CSS class name to be specified for the calendar display button, which may display a calendar icon for example. The datePickerIcon class name is available in most WebMaker themes. The Button Text option enables the entry of caption text, which can be used instead for the calendar popup button. Table of Frequently Used Calendar Button Styles

Class Name	Notes on Use
datePickerIcon	Defines the calendar image, which can be used as the link to popup a calendar for date selection.
timePickerIcon	Defines an image of a clock or similar, for use against fields that only permit time selection.

The Data Case Conversion option sets the case format required for the data on the server for string fields. Any values entered on screen are converted to this format on submission (Requires server controllers). The options are Preserve, Lower, Upper, Title and Sentence. Preserve leaves the case exactly the same, Title capitalises the first letter of each word, and Sentence capitalises the first letter of the first word. Lower and Upper options convert the whole string to lowercase and uppercase respectively. The Display Case Conversion options are similar to the Data Case Conversion options, but apply to the data being displayed on client devices rather than server data. The Data Whitespace Conversion option provides control over the treatment of whitespace (blanks) entered for string values. The values are Preserve, which leaves the data as entered, Collapse, which removes whitespace from the beginning and end of the string and then shrinks any group of whitespace characters to a single space, and finally Remove, which removes all whitespace from the entered string.